<!-- optimized-image.component.html -->
<div
  class="optimized-image-container"
  [ngStyle]="containerStyle"
  [class.loaded]="loaded"
>
  <picture *ngIf="isResponsive">
    <source
      *ngIf="supportsWebp"
      type="image/webp"
      [attr.srcset]="webpSrcSet"
      [attr.sizes]="computedSizes"
    />
    <source
      [attr.srcset]="originalSrcSet"
      [attr.sizes]="computedSizes"
    />
    <img
      #imgEl
      [attr.src]="fallbackSrc"
      [attr.alt]="alt"
      class="optimized-image"
      [ngStyle]="imageStyle"
      [attr.loading]="loading"
      (error)="onError($event)"
    />
  </picture>

  <img
    *ngIf="!isResponsive"
    #imgEl
    [attr.src]="optimizedSrc"
    [attr.alt]="alt"
    class="optimized-image"
    [ngStyle]="imageStyle"
    [attr.loading]="loading"
    (error)="onError($event)"
  />

  <div class="image-placeholder" *ngIf="!loaded">
    <ng-content select="[placeholder]"></ng-content>
    <i nz-icon nzType="picture" *ngIf="!hasPlaceholder"></i>
  </div>
</div>
